import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import { Grid, Button, Modal } from 'antd-mobile'
import { BASE_URL } from '../../utils'
import { isAuth, removeToken } from '../../utils/auth'
import './index.sass'
// 菜单数据
const menus = [
  { id: 1, name: '我的收藏', iconfont: 'icon-coll', to: '/collection' },
  { id: 2, name: '我的出租', iconfont: 'icon-ind', to: '/rent' },
  { id: 3, name: '看房记录', iconfont: 'icon-record' },
  {
    id: 4,
    name: '成为房主',
    iconfont: 'icon-identity'
  },
  { id: 5, name: '个人资料', iconfont: 'icon-myinfo' },
  { id: 6, name: '联系我们', iconfont: 'icon-cust' }
]

// 默认头像
const DEFAULT_AVATAR = BASE_URL + '/img/profile/avatar.png'

const alert = Modal.alert
export default class index extends Component {
  state = {
    // 是否登录
    isLogin: isAuth(),
    // 用户信息
    userInfo: {
      avatar: '',
      nickname: ''
    }
  }
  // 注意：不要忘了在进入页面时调用方法 ！
  componentDidMount() {
    this.getUserInfo()
  }
  async getUserInfo() {
    if (!this.state.isLogin) {
      // 未登录
      return
    }
    // 发送请求，获取个人资料
    const res = await this.$API.get('/user')
    // console.log(res)
    if (res.status === 200) {
      const { avatar, nickname } = res.body
      this.setState({
        userInfo: {
          avatar: BASE_URL + avatar,
          nickname
        }
      })
    } else {
      // token 失效的情况，这种情况下， 应该将 isLogin 设置为 false
      this.setState({
        isLogin: false
      })
    }
  }
  loginOrLogout() {
    if (!this.state.isLogin) {
      this.props.history.push('/login')
    } else {
      alert('提示', '是否确定退出?', [
        { text: '取消' },
        {
          text: '退出',
          onPress: async () => {
            // 调用退出接口
            await this.$API.post('/user/logout')
            // 移除本地token
            removeToken()
            // 处理状态
            this.setState({
              isLogin: false,
              userInfo: {
                avatar: '',
                nickname: ''
              }
            })
          }
        }
      ])
    }
  }
  render() {
    const { isLogin, userInfo: { avatar, nickname } } = this.state
    return (
      <div className="profile">
        <img src={BASE_URL + '/img/profile/bg.png'} alt="" />
        <div className="info-box">
          <img src={avatar || DEFAULT_AVATAR} alt="" />
          <p>{nickname || '游客'}</p>
          <button className={isLogin ? 'exit' : 'login'} onClick={() => this.loginOrLogout()}>
            {isLogin ? '退出登录' : '去登录'}
          </button>
          {
            isLogin ?
              <p style={{ marginTop: '20px' }}>编辑个人资料</p> : null
          }
          <div className="grid-box">
            {
              menus.map(i =>
                <div className="item-box" key={i.id}>
                  <Link to={i.to || '/home/profile'}>
                    <p>{i.name}</p>
                    <p className={`iconfont ${i.iconfont}`}></p>
                  </Link>
                </div>
              )
            }
          </div>
        </div>
      </div>
    )
  }
}
